<!--文章详情页-->
<template>
  <div>
    <br>
    <Adaption>
      <div style="padding: 2%;background-color: white">
        <!--                  头像,昵称展示-->
        <UserHead v-if="article.user.headPhoto!=''" :sender="article.user" :date="article.date">
        </UserHead>
        <!--      标题-->
        <h2>{{ article.title }}</h2>
        <!--      文章内容-->
        <p class="article-content" v-html="article.content">
        </p>
        <ArticleBottom v-if="article.user.headPhoto!=''" :uid="uid" :article-id="this.$route.query.articleId"
                       :is-like="article.isLike?true:false"
                       :is-collect="article.isCollect?true:false"
                       :stars="article.likeNum"
                       :commentNum="article.comments[0].date?article.commentNum:0" :view="article.view"></ArticleBottom>
        <br>
        <!--        评论填写框-->
        <el-input v-model="input" placeholder="写下你的评论...">
          <el-button @click="submitCommit()" type="primary" slot="append" plain>发布</el-button>
        </el-input>
        <!--评论区-->
        <Comment v-if="comment.date!=null"  v-for="comment in article.comments" :key="comment.id" :comment="comment" :articleId="article.id"
                 :uid="uid">
        </Comment>
        <br><br>
      </div>
      <!-- 分页开始-->
      <br>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000">
      </el-pagination>
      <!-- 分页结束-->
    </Adaption>
    <!--    底部背景栏-->
    <br>
  </div>
</template>

<script>
import Adaption from '../base/Adaption'
import UserHead from '../forum/user/UserHead'
import ArticleBottom from '../forum/article/ArticleBottom'
import Comment from '../forum/comment/Comment'
import axios from 'axios'

const Qs = require('qs')

export default {
  name: 'Article',
  components: {Comment, ArticleBottom, Adaption, UserHead},
  data () {
    return {
      uid: '',
      input: '',
      selectArticleId: '',
      article: {
        isLike: '',
        isCollect: '',
        user: {
          id: '-1',
          username: '渲染中...',
          headPhoto: ''
        },
        commentNum: 0,
        comments: []
      },
      componentHeight: 0
    }
  },
  mounted () {
    axios.get('/user/getUser').then(function (res) {
      if (res.data.result) {
        // 已登录
        var uid = res.data.result.id
        this.uid = uid
        axios.get('/article/queryOneArticle', {
          params: {
            articleId: this.$route.query.articleId,
            uid: uid
          }
        }).then(function (res) {
          console.log(res.data)
          this.article = res.data.result
        }.bind(this))
      } else {
        // 未登录
        axios.get('/article/queryOneArticleNoLogin', {
          params: {
            articleId: this.$route.query.articleId
          }
        }).then(function (res) {
          console.log(res.data)
          this.article = res.data.result
        }.bind(this))
      }
    }.bind(this))
  },
  methods: {
    submitCommit: function () {
      if (this.uid) {
        // 已登录
        var data = Qs.stringify({
          comment: this.input,
          articleId: this.$route.query.articleId,
          'sender.id': this.uid
        })
        axios.post('/comment/addCommentUnderArticle', data).then(function (res) {
          console.log(res.data)
          this.$refs.articleBottom.commentNumTem++
          this.input = ''
          this.$message({
            message: '评论成功！',
            type: 'success'
          })
          // 更新评论区，插入新评论到头部
          this.article.comments.unshift(res.data.result)
        }.bind(this))
      } else {
        // 未登录
        this.$router.push('/login')
      }
    }
  }
}</script>

<style scoped>
.article-content {
  margin-left: 2%;
  margin-right: 2%;
  line-height: 40px;
}
</style>
